<template>
    <div>
        <!--查询条件start --111s-->
        <el-form :inline="true"
                 :model="query"
                 class="query-form"
                 size="small">
            <el-form-item label="选择一级商品">
                <el-select v-model="submitJson.topCategoryId"
                           placeholder="请选择一级商品"
                           @change="topchange()"
                >
                    <el-option v-for="(item,index) in category"
                               :key="index"
                               :label="item.topcategoryname"
                               :value="item.topcategoryid">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="选择二级商品">
                <el-select v-model="submitJson.twoCategoryId"
                           placeholder="请选择二级商品"

                           @change="secondchange()">
                    <el-option v-for="(item,index) in busCommoditySecondaryCategoryList"
                               :key="index"
                               :label="item.topcategoryname"
                               :value="item.topcategoryid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择三级商品">
                <el-select v-model="submitJson.threeCategoryId"
                           placeholder="请选择三级商品"

                           @change="threechange()">
                    <el-option v-for="(item,index) in busCommodityThirdCategoryList"
                               :key="index"
                               :label="item.topcategoryname"
                               :value="item.topcategoryid">
                    </el-option>
                </el-select>
            </el-form-item>
            <div v-loading="loading">
                <div v-if="submitJson.threeCategoryId">
                    <h3 class="muBanLabel">类别模板</h3>
                    <ul v-for="(item,index) in submitJson.goodsTemplateFormList"
                        :key="index">
                        <li>
                            <el-form-item size="medium">
                                <el-input class="muBanName"
                                          v-model="item.name"
                                          size="medium"
                                          autosize
                                          placeholder="输入审核类目名称"></el-input>
                            </el-form-item>
                        </li>
                        <li v-for="(val,k) in item.templateItemFormList"
                            :key="k">
                            <el-form-item>
                                <el-input placeholder="输入审核项名称"
                                          v-model="val.fieldname"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-select v-model="val.fieldtype"
                                           placeholder="选择类型"
                                           clearable>
                                    <el-option v-for="(v,i) in sleType"
                                               :key="i"
                                               :label="v"
                                               :value="v"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-select v-model="val.ismust"
                                           clearable>
                                    <el-option :label="'必填'"
                                               :value="0"></el-option>
                                    <el-option :label="'非必填'"
                                               :value="1"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="addProjectName(1,index,k)"
                                           class="setBtn"
                                           type="primary"
                                           icon="el-icon-plus"
                                           plain
                                           size="mini"></el-button>
                                <el-button @click="delProjectName(1,index,k)"
                                           class="setBtn"
                                           type="danger"
                                           icon="el-icon-minus"
                                           plain
                                           size="mini"></el-button>
                            </el-form-item>
                        </li>
                    </ul>
                </div>
            </div>
            <el-form-item>
                <el-button type="primary"
                           @click.native="addSubmit()"
                           :loading="loading">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import {
        getGoodsTemplateList,
        addOrEditCheckGoodsTemplate
    } from "../../api/buscommodity/buscommodity.js";
    import {
        getCommoditySublevelList,
        getCommodityTopCategoryHDPage
    } from "../../api/classification/classification.js";
    import Tinymce from "../../components/Tinymce/index.vue";
    const templateFromList = [
        {
            name: "",
            templateItemFormList: [
                {
                    fieldtype: "",
                    fieldname: "",
                    fieldvalue: "",
                    ismust: 0
                }
            ]
        }
    ];
    export default {
        components: {
            Tinymce
        },
        data() {
            return {
                sleType: ["文字", "图片", "数字"],
                loading: true,
                query: {
                    //查询条件
                    parentid: null,
                    topcategoryname: "",
                    currentPage: 1,
                    pageSize: 1000,
                    level: 1
                },
                //savadd参数list
                category: [], //分类列表
                busCommoditySecondaryCategoryList: [], //二级
                busCommodityThirdCategoryList: [], //三级
                submitJson: {
                    topCategoryId: null,
                    twoCategoryId: null,
                    threeCategoryId: null,
                    templateFormList: templateFromList,
                    goodsTemplateFormList: templateFromList
                }
            };
        },
        watch: {},
        methods: {
            //一级
            topchange() {
                if (this.submitJson.topCategoryId == "") {
                    return false;
                }
                let data = {
                    topcategoryid: this.submitJson.topCategoryId
                };
                this.loading = true;
                getCommoditySublevelList(data)
                    .then(response => {
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            return false;
                        }
                        console.log(response);
                        this.busCommoditySecondaryCategoryList =
                            response.data || [];
                        this.submitJson.twoCategoryId = null;
                        this.submitJson.threeCategoryId = null;
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            },
            //二级
            secondchange() {
                if (this.submitJson.twoCategoryId == "") {
                    return false;
                }
                this.loading = true;
                console.log(this.submitJson);
                let data = {
                    topcategoryid: this.submitJson.twoCategoryId
                };
                getCommoditySublevelList(data)
                    .then(response => {
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            return false;
                        }
                        console.log(response);
                        this.busCommodityThirdCategoryList = response.data || [];
                        this.submitJson.threeCategoryId = null;
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            },
            threechange() {
                console.log(this.submitJson);
                if (this.submitJson.threeCategoryId == "") {
                    return false;
                }
                this.loading = true;
                const formData = new FormData();
                formData.append("threeCategoryId", this.submitJson.threeCategoryId);
                getGoodsTemplateList(formData)
                    .then(response => {
                        console.log(response.data);
                        if (response.code) {
                            this.$message.error(response.message);
                            this.loading = false;
                        }
                        if (response.data.goodsTemplateFormList.length > 0) {
                            this.submitJson.goodsTemplateFormList = response.data.goodsTemplateFormList;
                        } else {
                            const list = [
                                {
                                    name: "",
                                    templateItemFormList: [
                                        {
                                            fieldtype: "",
                                            fieldname: "",
                                            fieldvalue: "",
                                            ismust: 0
                                        }
                                    ]
                                }
                            ];
                            this.submitJson.goodsTemplateFormList = list;
                        }
                        // let data = response.data.list || [];
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            },
            getCategory() {
                this.loading = true;
                getCommodityTopCategoryHDPage(this.query)
                    .then(response => {
                        console.log(response);
                        if (response.code) {
                            this.$message.error(response.message);
                        }
                        let data = response.data.list || [];
                        this.category = data;
                        console.log(data);
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            },
            addCategoryName(type, i) {
                if (type == 1) {
                    !this.isEditable() &&
                    this.submitJson.templateFromList.splice(i + 1, 0, {
                        name: "",
                        templateItemFormList: [
                            {
                                fieldtype: "",
                                fieldname: "",
                                fieldvalue: "",
                                ismust: 0
                            }
                        ]
                    });
                } else {
                    !this.isEditable() &&
                    this.submitJson.goodsTemplateFormList.splice(i + 1, 0, {
                        name: "",
                        templateItemFormList: [
                            {
                                fieldtype: "",
                                fieldname: "",
                                fieldvalue: "",
                                ismust: 0
                            }
                        ]
                    });
                }
            },
            addSubmit() {
                let data = this.submitJson;
                const that = this;
                let isBlank = false;
                if (!this.submitJson.topCategoryId) {
                    that.$message({
                        message: "请选择一级分类！",
                        type: "warning"
                    });
                    return false;
                }
                if (!this.submitJson.twoCategoryId) {
                    that.$message({
                        message: "请选择二级分类！",
                        type: "warning"
                    });
                    return false;
                }
                if (!this.submitJson.threeCategoryId) {
                    that.$message({
                        message: "请选择三级分类！",
                        type: "warning"
                    });
                    return false;
                }
                data = [
                    ...this.submitJson.goodsTemplateFormList
                ];
                for (const key in data) {
                    if (data[key].name == "") {
                        that.$message({
                            message: "有未填写的审核类目名称！",
                            type: "warning"
                        });
                        isBlank = true;
                        break;
                    }
                    for (const k in data[key].templateItemFormList) {
                        if (data[key].templateItemFormList[k].fieldname == "") {
                            that.$message({
                                message: "有未填写的项目名称！",
                                type: "warning"
                            });
                            isBlank = true;
                            break;
                        } else if (
                            data[key].templateItemFormList[k].fieldtype == ""
                        ) {
                            that.$message({
                                message: "有未选的类型！",
                                type: "warning"
                            });
                            isBlank = true;
                            break;
                        }
                    }
                }
                if (isBlank) {
                    return false;
                }
                this.loading = true;
                addOrEditCheckGoodsTemplate(this.submitJson)
                    .then(response => {
                        console.log(response);
                        if (response.code) {
                            this.$message.error(response.message);
                        }
                        setTimeout(() => {
                            console.log(response);
                            this.$message.success("提交成功！");
                            this.loading = false;
                        }, 0.3 * 1000);
                    }).catch(() => {
                        this.loading = false;
                    });
            },
            delCategoryName(type, i) {
                !this.isEditable() &&
                this.submitJson.goodsTemplateFormList.length != 1 &&
                this.submitJson.goodsTemplateFormList.splice(i, 1);
            },
            addProjectName(type, i, k) {
                !this.isEditable() &&
                this.submitJson.goodsTemplateFormList[
                    i
                    ].templateItemFormList.splice(k + 1, 0, {
                    fieldtype: "",
                    fieldname: "",
                    fieldvalue: "",
                    ismust: 0
                });
            },
            delProjectName(type, i, k) {
                !this.isEditable() &&
                this.submitJson.goodsTemplateFormList[i].templateItemFormList.length != 1 &&
                this.submitJson.goodsTemplateFormList[i].templateItemFormList.splice(k, 1);
            },
            isEditable() {
                if (!this.submitJson.topCategoryId) {
                    return this.$message({
                        message: "请选择一级分类！",
                        type: "warning"
                    });
                }
                if (!this.submitJson.twoCategoryId) {
                    return this.$message({
                        message: "请选择二级分类！",
                        type: "warning"
                    });
                }
                return false;
            }
        },

        created() {
            this.getCategory();
        }
    };
</script>
<style type="text/css">
    .muBanLabel {
        margin: 20px 0;
        color: #606266;
    }
    .muBanName.el-input {
        width: 635px;
    }
    .setBtn.el-button {
        margin-left: 20px;
    }
</style>
